<template>
    <div class='bx'>
       <div class='tab'>
           <div style='width:50%;margin-bottom:10px;text-align:center'>模板名称:<el-input v-model="form.templateName" style='width:280px'></el-input></div>
           <table border="1" cellspacing="0" cellpadding="5" align="center" width="50%">
               <tr>
                   <td colspan="4"><h2>成绩单</h2></td>
               </tr>
               <tr>
                   <td>姓名</td>
                   <td><input v-model="form.name"></td>
                   <td>学院</td>
                   <td><input v-model="form.college"></td>
               </tr>
               <tr>
                   <td>专业</td>
                   <td><input v-model="form.major"></td>
                   <td>班级</td>
                   <td><input v-model='form.classRoom'></td>
               </tr>
               <tr>
                   <td>科目</td>
                   <td>分数</td>
                   <td>评价</td>
                   <td style='width:25%'>是否补考</td>
               </tr>
               <tr v-for="(item, index) in form.situation" :key="index">
                   <td><input v-model="item.subjects"></td>
                   <td><input v-model="item.grade"></td>
                   <td><input v-model="item.evaluate"></td>
                   <td><input v-model="item.ifresit"></td>
                    <!-- <td style='border:none'><el-button @click='removeOptionItem(index)'>删除</el-button></td> -->
               </tr>
           </table>
           <el-button @click='addOut' style='margin-left:43%;margin-top:20px;'>添加</el-button>
           <el-button @click='addList' style='margin-left:10px;margin-top:20px;'>添加数据</el-button>
       </div>
    </div>
</template>

<script>
import {
Addgradetemplate,
} from "@/api/achievement/gradetemplate";
export default {
   data() {
       return {
           form:{
           situation:[],
           templateName:'',
           name:'',
           college:'',
           major:'',
           classRoom:''
        }
       }
   },
    mounted() {

    },

    methods: {
    async addList(){
        console.log(this.form);
       let res=await Addgradetemplate(this.form)
       console.log(res)
          this.$message.success("添加成功");
      this.$router.push({
        name: "Gradetemplate",
      });
    },
    addOut() {
      this.form.situation.push({ subjects: "", grade: "" ,evaluate:'',ifresit:''});
    },
      removeOptionItem(index) {
      this.situation.splice(index, 1);
    }
    },
};
</script>

<style lang='scss' scoped >
.bx{
    width: 100%;
    height: 100%;
    .tab{
        margin-top: 5%;
        margin-left: 30%;
    }
}

tr{
    text-align: center;
    height: 100px;
    td{
        width: 100px;
        height: 100px;
    }
}
input{
  width:100%;
  height:100px;
  border:none;
  text-align: center;
  background:none;
}
</style>
